<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>问答-KuangStudy</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
</head>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
	.xuanfu:hover
	{
		background-color: #F2F6FC;

	}
</style>
<body style="background: #f2f2f2;">

<div th:replace="~{common/header::header(activeUrl='question')}"></div>
<main role="main" class="container">
    <div class="row" id="app">
        <div class="col-md-9 blog-main">

            <div class="my-3 p-3 bg-white rounded shadow-sm">

                <h6 class="border-bottom border-gray pb-2 mb-0">
                    Q&A 累计：{{count}}
                    <span ></span>
                    <span class="float-right" >
                        <a href="#" @click="findList">全部</a>
                        /
                        <span v-text="cate == ''?'all':cate"></span>
                    </span>
                </h6>
				<div>
                <div @click="toRead(list.qid)" style="cursor:pointer" v-for="(list,k) in questionList" :key="k" class="xuanfu media text-muted pt-3">
                    <!-- 头像 -->
                    <img  :src="list.authorAvatar" style="border-radius: 5px " width="32" height="32">
                    <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
                        <!-- 标题 -->
                        <a
							v-text="list.title"
                           class="text-dark font-weight-bold text-decoration-none d-block">

                        </a>
                        <!-- 状态 -->
                        <span v-if="list.status == 1" class="badge badge-warning">
	                        已解决
                        </span>
	                    <span v-else class="badge badge-info">
		                    未解决
	                    </span>
                        <!-- 浏览量 -->
                        <span>
                            <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
  <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
{{list.views}}
                        </span>
	                <span class="badge badge-pill badge-primary mr-1" v-text="list.categoryName">java</span>
                        <!-- 时间 -->
                        <span
                              class="badge badge-light float-right" >{{list.gmtCreate | msgFormat}}
                        </span>
                    </p>
                </div>

                <!--分页-->
                <nav aria-label="Page navigation example" class="mt-4">
	                <el-pagination
			                background
			                :current-page="index"
			                layout="prev, pager, next"
			                @current-change="currentchange"
			                :total="count">
	                </el-pagination>
                </nav>
				</div>
            </div>

        </div>

        <aside class="col-md-3 blog-sidebar">

            <div class="my-3 rounded">
                <p class="mb-0">
                    <a th:href="@{/question/write}" class="btn btn-primary btn-sm btn-block" style="color: white">发布问题</a>
                </p>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <p class="mb-0"> 社区公约: <br> 提问内容描述一定要清楚，回答尽量靠近主题，禁止瞎水社区，违者暂停账号使用! 申请分类可以在Q群@小狂神 </p>
            </div>

            <div style="cursor:pointer" class="p-4 my-3 bg-white rounded">
                <a v-for="(v,k) in category" @click="categoryQuery(v)" :key="k" style="color: white" v-text="v" class="badge badge-pill badge-primary mr-1"></a>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <h4 class="font-italic">友情链接</h4>
                <ol class="list-unstyled">
                    <li><a href="https://gitee.com/kuangstudy">Gitee</a></li>
                    <li><a href="https://space.bilibili.com/95256449">Bilibili</a></li>
                </ol>
            </div>
        </aside>

    </div>

</main>


<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>


</body>
<script>
    Vue.filter('msgFormat', function(msg) {
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return moment(msg).format('YYYY-MM-DD');
    })

    const vm = new Vue({
        el:"#app",
        data:{
            count: 0,
            category: [],
	        cate: "",
	        questionList: {},
            pages: 1,
	        index: 1,
        },
	    methods:{
            toRead(uid){
                window.location.href = "/question/read/"+uid
            },
            categoryQuery(v,index){
                this.cate = v;
                const ind = index == null?1:index;
                axios({
	                url: "/question/list/"+ind+"?categoryName="+this.cate,
	                method: "POST"
                }).then((resp)=>{
                    const data = resp.data.data;
                    this.count = data.total;
                    this.pages = data.pages;
                    this.questionList = data.questionList;
                })
                this.index = index== null?1:index;
            },
            currentchange(index){
                this.index = index;
                this.categoryQuery(this.cate,index);
            },
		    findList(){
                this.index = 1
                this.cate = 'all';
                axios({
                    url: "/question/list/1",
                    method: "POST"
                }).then((resp)=>{
                    const data = resp.data.data;
                    this.count = data.total;
                    this.pages = data.pages;
                    this.questionList = data.questionList;
                })
		    }
	    },

    })
    function categoryCount() {
        axios({
            url: "/question/info",
            method: "POST"
        }).then((resp)=>{
            const data = resp.data.data;
            vm.count = data.count;
            vm.category = data.category;
        })
        axios({
            url: "/question/list/1",
            method: "POST"
        }).then((resp)=>{
            const data = resp.data.data;
            vm.count = data.total;
            vm.pages = data.pages;
            vm.questionList = data.questionList;
        })
    }
    categoryCount();


</script>
</html>
